<{include file="v2/header.html"}>
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;600;700;900&display=swap');
    
    /* 注释弹窗 */
    .annotation-popup {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        bottom: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        color: #f5f2ea;
        text-align: center;
        border-radius: 4px;
        padding: 8px 12px;
        width: max-content;
        max-width: 200px;
        z-index: 100;
        transition: opacity 0.3s, visibility 0.3s;
        font-size: 14px;
    }
    
    .annotation-popup::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }
    
    .annotation-hover:hover .annotation-popup {
        visibility: visible;
        opacity: 1;
    }
    
    /* 音频波形动画 */
    @keyframes wave {
        0%, 100% {
            height: 8px;
        }
        50% {
            height: 24px;
        }
    }
    
    .audio-wave span:nth-child(2) { animation-delay: 0.1s; }
    .audio-wave span:nth-child(3) { animation-delay: 0.2s; }
    .audio-wave span:nth-child(4) { animation-delay: 0.3s; }
    .audio-wave span:nth-child(5) { animation-delay: 0.4s; }
    .audio-wave span:nth-child(6) { animation-delay: 0.5s; }
    .audio-wave span:nth-child(7) { animation-delay: 0.4s; }
    .audio-wave span:nth-child(8) { animation-delay: 0.3s; }
    .audio-wave span:nth-child(9) { animation-delay: 0.2s; }
    .audio-wave span:nth-child(10) { animation-delay: 0.1s; }
    
    /* 滚动动画 */
    .scroll-reveal {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .scroll-reveal.active {
        opacity: 1;
        transform: translateY(0);
    }
    
    /* 标签切换 */
    .tab-content {
        display: none;
    }
    
    .tab-content.active {
        display: block;
        animation: fadeIn 0.5s ease;
    }
    
    .tab-button.active {
        border-color: #c41e3a;
        color: #c41e3a;
        font-weight: 500;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>
<main class="pt-24 pb-16">
    <!-- 路径导航 -->
    <section class="container mx-auto px-4 mb-8 text-sm text-lightink scroll-reveal">
        <a href="<{spUrl c=main a=index}>" class="hover:text-cinnabar transition-colors">首页</a>
        <span class="mx-2"><i class="fa fa-angle-right"></i></span>
        <a href="<{spUrl c=main a=gushi}>" class="hover:text-cinnabar transition-colors">诗境</a>
        <span class="mx-2"><i class="fa fa-angle-right"></i></span>
        <span><{$result.title}></span>
    </section>
    
    <!-- 诗词详情 -->
    <section class="container mx-auto px-4">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
            <!-- 左侧内容区 -->
            <div class="lg:col-span-2">
                <!-- 诗词标题与作者 -->
                <div class="mb-10 scroll-reveal">
                    <div class="flex flex-wrap items-center gap-3 mb-4">
                        <{foreach from=$result.tags item=tag}>
                            <{if $tag@first}>
                            <span class="bg-cinnabar/10 text-cinnabar text-sm px-3 py-1 rounded-full"><{$tag}></span>
                            <{else}>
                            <span class="bg-ink/10 text-ink text-sm px-3 py-1 rounded-full"><{$tag}></span>
                            <{/if}>
                        <{/foreach}>
                    </div>
                    <h1 class="text-[clamp(2rem,5vw,3rem)] font-song font-bold mb-4"><{$result.title}></h1>
                    <div class="flex items-center mb-6">
                        <a href="poet-detail.html" class="flex items-center text-lightink hover:text-cinnabar transition-colors">
                            <img src="https://picsum.photos/id/64/100/100" alt="<{$result.author}>头像" class="w-10 h-10 rounded-full object-cover mr-3">
                            <span><{$result.author}></span>
                        </a>
                        <span class="mx-3 text-lightink">|</span>
                        <div class="flex items-center text-lightink">
                            <span class="mr-4"><i class="fa fa-eye mr-1"></i> <{$result.num}></span>
                            <span class="mr-4"><i class="fa fa-heart-o mr-1"></i> <{$result.like}></span>
                        </div>
                    </div>
                    
                    <!-- 朗诵控制 -->
                    <div class="flex items-center bg-paper p-4 rounded-lg mb-6">
                        <button id="read-poem" class="w-12 h-12 rounded-full bg-cinnabar text-rice flex items-center justify-center mr-4 hover:bg-opacity-90 transition-colors">
                            <i class="fa fa-play"></i>
                        </button>
                        <div>
                            <p class="font-medium mb-1">聆听诗词</p>
                            <div id="wave-container" class="audio-wave hidden">
                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                            </div>
                            <div id="read-status" class="text-sm text-lightink">
                                <{if $result.audio}>点击播放朗诵音频<{else}>准备生成朗诵音频<{/if}>
                            </div>
                        </div>
                        <!-- 隐藏的音频元素 -->
                        <{if $result.audio}>
                        <audio id="poem-audio" src="<{$result.audio}>" preload="metadata"></audio>
                        <{else}>
                        <audio id="poem-audio" preload="none"></audio>
                        <{/if}>
                    </div>
                </div>
                
                <!-- 诗词原文 -->
                <div class="mb-12 bg-paper p-8 rounded-xl shadow-sm scroll-reveal">
                    <div class="font-kai text-[clamp(1.5rem,3vw,2rem)] leading-loose text-center">
                        <{$result.content}>
                    </div>
                </div>
                
                <!-- 解析标签页 -->
                <div class="scroll-reveal">
                    <!-- 标签切换按钮 -->
                    <div class="flex flex-wrap border-b border-gray-300 mb-6">
                        <button class="tab-button active py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="annotation">注释</button>
                        <button class="tab-button py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="translation">译文</button>
                        <button class="tab-button py-3 px-6 mr-2 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="appreciation">赏析</button>
                        <button class="tab-button py-3 px-6 border-b-2 border-transparent hover:text-cinnabar transition-colors" data-tab="background">创作背景</button>
                    </div>
                    
                    <!-- 标签内容 -->
                    <div class="tab-content active" id="annotation">
                        <div class="bg-paper p-6 rounded-xl">                                
                            <{$result.annotations}>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="translation">
                        <div class="bg-paper p-6 rounded-xl">
                            <{$result.translation}>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="appreciation">
                        <div class="bg-paper p-6 rounded-xl">
                            <{$result.appreciation}>
                        </div>
                    </div>
                    
                    <div class="tab-content" id="background">
                        <div class="bg-paper p-6 rounded-xl">
                            <{$result.background}>
                        </div>
                    </div>
                </div>
                
                <!-- 相关诗词 -->
                <div class="mt-16 scroll-reveal">
                    <h2 class="text-2xl font-song font-bold mb-6">相关诗词</h2>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- 相关诗词1 -->
                        <{foreach from=$res_gushi item=v}>
                            <a href="<{spUrl c=main a=gsDetails id=$v.id}>" class="bg-paper p-5 rounded-lg shadow-sm hover:shadow-md transition-shadow">
                                <h3 class="font-song font-bold mb-2"><{$v.title}></h3>
                                <p class="text-lightink text-sm mb-3"><{$v.author}></p>
                                <p class="font-kai text-ink/80 text-sm"><{$v.content|truncate:50:'...'}></p>
                            </a>
                        <{/foreach}>
                    </div>
                </div>
            </div>
            
            <!-- 右侧互动区 -->
            <div class="lg:col-span-1">
                <!-- 声景体验 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                    <div class="h-48 relative">
                        <img src="https://picsum.photos/600/400" alt="<{$result.title}>声景" class="w-full h-full object-cover">
                        <div class="absolute inset-0 bg-gradient-to-t from-ink/80 to-transparent flex items-end">
                            <h3 class="text-rice font-song font-bold p-6">声景体验</h3>
                        </div>
                    </div>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">感受诗中的氛围，聆听相关场景音效</p>
                        <button id="soundscape-btn" class="w-full bg-cinnabar text-rice py-3 rounded-lg hover:bg-opacity-90 transition-colors flex items-center justify-center">
                            <i class="fa fa-volume-up mr-2"></i> 体验《<{$result.title}>》声景
                        </button>
                        <div id="soundscape-player" class="mt-4 hidden">
                            <div class="audio-wave mb-2">
                                <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-lightink" id="soundscape-current">00:00</span>
                                <div class="flex space-x-3">
                                    <button class="text-ink hover:text-cinnabar" id="soundscape-backward"><i class="fa fa-step-backward"></i></button>
                                    <button class="text-ink hover:text-cinnabar" id="soundscape-toggle"><i class="fa fa-pause"></i></button>
                                    <button class="text-ink hover:text-cinnabar" id="soundscape-forward"><i class="fa fa-step-forward"></i></button>
                                </div>
                                <span class="text-sm text-lightink" id="soundscape-duration">00:00</span>
                            </div>
                        </div>
                        <audio id="soundscape-audio" preload="none"></audio>
                    </div>
                </div>
                
                <!-- 创作联动 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                    <h3 class="font-song font-bold p-6 border-b border-gray-200">创作联动</h3>
                    <div class="p-6">
                        <a id="create-painting" href="<{$url_painting}>" class="block mb-4 p-4 border border-gray-200 rounded-lg hover:border-cinnabar hover:bg-cinnabar/5 transition-colors w-full text-left">


                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-cinnabar/10 flex items-center justify-center mr-4">
                                    <i class="fa fa-paint-brush text-cinnabar"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">生成诗画</h4>
                                    <p class="text-sm text-lightink">为《 <{$result.title}> 》创作一幅画</p>
                                </div>
                            </div>
                        </a>
                        <a id="continue-poem" href="<{$url_continue}>" class="block p-4 border border-gray-200 rounded-lg hover:border-cinnabar hover:bg-cinnabar/5 transition-colors w-full text-left">
                            <div class="flex items-center">
                                <div class="w-12 h-12 rounded-full bg-cinnabar/10 flex items-center justify-center mr-4">
                                    <i class="fa fa-pencil text-cinnabar"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium">续写诗句</h4>
                                    <p class="text-sm text-lightink">尝试为《 <{$result.title}>》续写新的诗句</p>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>
                
                <!-- 用户笔记 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm mb-8 scroll-reveal">
                    <h3 class="font-song font-bold p-6 border-b border-gray-200">我的笔记</h3>
                    <div class="p-6">
                        <textarea id="note-content" placeholder="写下你对这首诗的理解和感悟..." class="w-full p-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-cinnabar focus:border-transparent min-h-[120px] resize-none"></textarea>

                        <div class="mt-4 flex justify-end">
                            <button id="save-note" class="bg-cinnabar text-rice px-4 py-2 rounded-lg hover:bg-opacity-90 transition-colors">

                                保存笔记
                            </button>
                        </div>
                    </div>
                </div>
                
                <!-- 分享 -->
                <div class="bg-paper rounded-xl overflow-hidden shadow-sm scroll-reveal">
                    <h3 class="font-song font-bold p-6 border-b border-gray-200">分享</h3>
                    <div class="p-6">
                        <p class="text-ink/80 mb-4">将这首诗词分享给好友</p>
                        <div class="flex space-x-3">
                            <button class="w-10 h-10 rounded-full bg-[#07C160] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                <i class="fa fa-weixin"></i>
                            </button>
                            <button class="w-10 h-10 rounded-full bg-[#E6162D] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                <i class="fa fa-weibo"></i>
                            </button>
                            <button class="w-10 h-10 rounded-full bg-[#1296DB] text-white flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                <i class="fa fa-qq"></i>
                            </button>
                            <button class="w-10 h-10 rounded-full bg-ink text-rice flex items-center justify-center hover:bg-opacity-90 transition-colors">
                                <i class="fa fa-link"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<script>
    

    // 标签切换功能
    $('.tab-button').click(function() {
        $('.tab-button').removeClass('active');
        $('.tab-content').removeClass('active');
        $(this).addClass('active');
        const tabId = $(this).data('tab');
        $('#' + tabId).addClass('active');
    });
    
    // 音频播放通用函数
    function setupAudioPlayer(buttonId, audioId, waveContainerId, statusElementId, initialText) {
        const button = $(buttonId);
        const audioElement = document.getElementById(audioId);
        const waveContainer = $(waveContainerId);
        const statusElement = $(statusElementId);
        let isPlaying = false;
        let isLoading = false;
        
        // 重置播放状态
        function resetAudioState() {
            isPlaying = false;
            button.find('i').removeClass('fa-pause').addClass('fa-play');
            waveContainer.addClass('hidden');
            statusElement.text(initialText);
            isLoading = false;
        }
        
        // 播放音频
        function playAudio() {
            return new Promise((resolve, reject) => {
                audioElement.play()
                    .then(() => {
                        isPlaying = true;
                        button.find('i').removeClass('fa-play').addClass('fa-pause');
                        waveContainer.removeClass('hidden');
                        resolve();
                    })
                    .catch(error => {
                        console.error('播放失败:', error);
                        statusElement.text('播放失败，请重试');
                        resetAudioState();
                        reject(error);
                    });
            });
        }
        
        // 暂停音频
        function pauseAudio() {
            audioElement.pause();
            resetAudioState();
        }
        
        // 音频结束事件
        audioElement.addEventListener('ended', resetAudioState);
        
        // 音频错误处理
        audioElement.addEventListener('error', function() {
            console.error('音频错误:', audioElement.error);
            statusElement.text('音频加载失败，请重试');
            resetAudioState();
        });
        
        return {
            togglePlay: function() {
                if (isLoading) return;
                
                if (isPlaying) {
                    pauseAudio();
                } else {
                    if (audioElement.src) {
                        playAudio();
                    } else {
                        statusElement.text('正在准备音频...');
                        isLoading = true;
                        return false; // 表示需要加载音频
                    }
                }
                return true;
            },
            setAudioSource: function(url) {
                audioElement.src = url;
                audioElement.load();
                statusElement.text('点击播放');
                isLoading = false;
                // 自动播放
                playAudio();
            },
            getAudioElement: function() {
                return audioElement;
            },
            isLoading: function() {
                return isLoading;
            }
        };
    }
    
    // 初始化诗词朗诵播放器
    const poemPlayer = setupAudioPlayer(
        '#read-poem', 
        'poem-audio', 
        '#wave-container', 
        '#read-status', 
        '<{if $result.audio}>点击播放朗诵音频<{else}>准备生成朗诵音频<{/if}>'
    );
    
    // 初始化声景播放器
    const soundscapePlayer = setupAudioPlayer(
        '#soundscape-btn', 
        'soundscape-audio', 
        '#soundscape-player .audio-wave', 
        '#soundscape-btn', 
        '<i class="fa fa-volume-up mr-2"></i> 体验《<{$result.title}>》声景'
    );
    
    // 声景进度更新
    function updateSoundscapeProgress() {
        const audio = soundscapePlayer.getAudioElement();
        if (audio.duration) {
            $('#soundscape-current').text(formatTime(audio.currentTime));
            $('#soundscape-duration').text(formatTime(audio.duration));
        }
    }
    
    // 格式化时间
    function formatTime(seconds) {
        const mins = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }
    
    // 声景播放器事件
    soundscapePlayer.getAudioElement().addEventListener('timeupdate', updateSoundscapeProgress);
    
    $('#soundscape-toggle').click(function() {
        poemPlayer.togglePlay();
    });
    
    $('#soundscape-backward').click(function() {
        const audio = soundscapePlayer.getAudioElement();
        audio.currentTime = Math.max(0, audio.currentTime - 10);
    });
    
    $('#soundscape-forward').click(function() {
        const audio = soundscapePlayer.getAudioElement();
        audio.currentTime = Math.min(audio.duration, audio.currentTime + 10);
    });
    
    // 发送文本到服务端生成音频
    function generateAudio(text, type) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'index.php?c=main&a=createAudioSubmit', true);
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        try {
                            const response = JSON.parse(xhr.responseText);
                            if (response.success && response.audio_url) {
                                resolve(response.audio_url);
                            } else {
                                reject(new Error(response.message || '音频生成失败'));
                            }
                        } catch (e) {
                            reject(new Error('解析响应失败'));
                        }
                    } else {
                        reject(new Error('请求失败: ' + xhr.status));
                    }
                }
            };
            xhr.send(`text=${encodeURIComponent(text)}&type=${type}`);
        });
    }
    
    // 诗词朗诵按钮点击事件
    $('#read-poem').click(function() {
        const result = poemPlayer.togglePlay();
        if (result === false) {
            // 需要生成音频
            const poemText = `<{$result.title}> <{$result.author}> <{$result.content}>`;
            generateAudio(poemText, 'poem')
                .then(audioUrl => {
                    poemPlayer.setAudioSource(audioUrl);
                    // 更新状态文本
                    $('#read-status').text('正在播放：<{$result.title}>朗诵');
                })
                .catch(error => {
                    console.error('生成音频失败:', error);
                    $('#read-status').text('生成音频失败，请重试');
                    poemPlayer.togglePlay(); // 重置状态
                });
        }
    });
    
    // 声景体验按钮点击事件
    $('#soundscape-btn').click(function() {
        const result = soundscapePlayer.togglePlay();
        if (result === false) {
            // 提取诗词中的关键词生成声景描述
            const content = '<{$result.content}>';
            const title = '<{$result.title}>';
            // 生成声景描述文本
            const soundscapeText = `生成与"${title}"相关的声景，诗句中提到了：${content}。请根据这些内容创建合适的环境音效。`;
            
            generateAudio(soundscapeText, 'soundscape')
                .then(audioUrl => {
                    soundscapePlayer.setAudioSource(audioUrl);
                    // 显示播放器控件
                    $('#soundscape-player').removeClass('hidden');
                    // 更新按钮文本
                    $('#soundscape-btn').html('<i class="fa fa-pause mr-2"></i> 暂停声景');
                })
                .catch(error => {
                    console.error('生成声景失败:', error);
                    $('#soundscape-btn').html('<i class="fa fa-volume-up mr-2"></i> 生成失败，请重试');
                    soundscapePlayer.togglePlay(); // 重置状态
                });
        }
    });
    
    // 页面滚动动画
    $(window).scroll(function() {
        $('.scroll-reveal').each(function() {
            const windowHeight = $(window).height();
            const elementTop = $(this).offset().top;
            const elementVisible = 150;
            
            if (elementTop < windowHeight - elementVisible) {
                $(this).addClass('active');
            }
        });
    });
    
    // 初始触发一次滚动事件
    $(window).trigger('scroll');

    $(function(){
        // 保存笔记
        $('#save-note').click(function(){
            var note = $('#note-content').val();
            if(note == ''){
                showToast('请输入笔记内容');
                return;
            }
            // 发送请求保存笔记
            $.ajax({
                url: 'index.php?c=main&a=saveNote',
                type: 'POST',
                data: {
                    note: note,
                    poem_id: <{$result.id}>
                },
                success: function(res){
                    if(res.code == 1){
                        showToast('保存成功');
                    }else{
                        showToast(res.msg,true);

                    }
                }
            })
        })
    })
</script>
<{include file="v2/footer.html"}>